{% extends '_index.html' %}


{% block main_contain %}
<div class="row" id="LicensePlateView">
    <!--私家車-->
    <div class="col-lg-6">
    <div class="card" :class="GateIn.Vehicle.LicensePlate=='UNKNOWN'?'card-warning':'card-primary'">
        <div class="card-header">
            <div class="row justify-content-between">
                <h5><i class="fas fa-car"></i> 私家車入口車牌結果：<strong>{[ GateIn.Vehicle.LicensePlate ]}</strong></h5>
                <h5><i class="fas fa-clock"></i> 識別時間：{[ GateIn.Vehicle.GateTime ]}</h5>
            </div>
        </div>
        <div class="card-body">
            <div class="text-center">
                <img :src="GateIn.Vehicle.Image==''? '{{ url_for('static', filename='images/default/vehicle.jpg')}}': GateIn.Vehicle.Image" 
                class="img-thumbnail" style="width: 65%;">
            </div>
        </div>
    </div>

    <div class="card" :class="GateOut.Vehicle.LicensePlate=='UNKNOWN'?'card-warning':'card-secondary'">
        <div class="card-header">
            <div class="row justify-content-between">
                <h5><i class="fas fa-car"></i> 私家車出口車牌結果：<strong>{[ GateOut.Vehicle.LicensePlate ]}</strong></h5>
                <h5><i class="fas fa-clock"></i> 識別時間：{[ GateOut.Vehicle.GateTime ]}</h5>
            </div>
        </div>
        <div class="card-body">
            <div class="text-center">
                <img :src="GateOut.Vehicle.Image==''? '{{ url_for('static', filename='images/default/vehicle.jpg')}}': GateOut.Vehicle.Image" 
                class="img-thumbnail" style="width: 65%;">
            </div>
        </div>
    </div>
    </div>
    <!--電單車-->
    <div class="col-lg-6">
        <div class="card" :class="GateIn.MotorCycle.LicensePlate=='UNKNOWN'?'card-warning':'card-primary'">
            <div class="card-header">
                <div class="row justify-content-between">
                    <h5><i class="fas fa-motorcycle"></i> 電單車入口車牌結果：<strong>{[ GateIn.MotorCycle.LicensePlate ]}</strong></h5>
                    <h5><i class="fas fa-clock"></i> 識別時間：{[ GateIn.MotorCycle.GateTime ]}</h5>
                </div>
            </div>
            <div class="card-body">
                <div class="text-center">
                    <img :src="GateIn.MotorCycle.Image==''? '{{ url_for('static', filename='images/default/vehicle.jpg')}}': GateIn.MotorCycle.Image" 
                    class="img-thumbnail" style="width: 65%;">
                </div>
            </div>
        </div>
        <div class="card" :class="GateOut.MotorCycle.LicensePlate=='UNKNOWN'?'card-warning':'card-secondary'">
            <div class="card-header">
                <div class="row justify-content-between">
                    <h5><i class="fas fa-motorcycle"></i> 電單車出口車牌結果：<strong>{[ GateOut.MotorCycle.LicensePlate ]}</strong></h5>
                    <h5><i class="fas fa-clock"></i> 識別時間：{[ GateOut.MotorCycle.GateTime ]}</h5>
                </div>
            </div>
            <div class="card-body">
                <div class="text-center">
                    <img :src="GateOut.MotorCycle.Image==''? '{{ url_for('static', filename='images/default/vehicle.jpg')}}': GateOut.MotorCycle.Image" 
                    class="img-thumbnail" style="width: 65%;">
                </div>
            </div>
        </div>
        </div>
</div>
<!-- /.row -->
{% endblock %}


<!--頁面脚本-->
{% block scripts %}
{{ super() }}
<script>
    // 車牌識別預覽
    var LicensePlateView = new Vue({
        el: '#LicensePlateView',
        delimiters: ['{[', ']}'],
        data: {
            GateIn: {
                Vehicle: {LicensePlate: 'MM1234', GateTime: '2021/5/2 12:12:12', Image: '', GateID: ''},
                MotorCycle: {LicensePlate: 'MM4321', GateTime: '2021/5/2 12:12:12', Image: '', GateID: ''},
            },
            GateOut: {
                Vehicle: {LicensePlate: 'UNKNOWN', GateTime: '2021/5/2 12:12:12', Image: '', GateID: ''},
                MotorCycle: {LicensePlate: 'MMMOTO', GateTime: '2021/5/2 12:12:12', Image: '', GateID: ''},
            },
        },
        methods: {
            // 更新識別結果
            refresh_license_plates(data){
                console.log(data)
            }
        }
    });

</script>
{% endblock %}